<template>
	<view>
		<!-- 提交订单页面 -->
		<view class="classBox" style="line-height: 25px;">
			<view class="classLeft">
				<image :src="classSList.classImg" class="classImg"></image>
			</view>
			<view class="classRight">
				<view class="className" style="line-height: 20px;">
					<text class="u-line-3">{{classSList.className }}</text>
				</view>
				<view class="classDate" style="margin-top: 10px;">{{ timeArray[0] }} 至 {{ correctDate }}</view>
			</view>
		</view>
		<!-- 人数选择 -->
		<view class="peopleNum">
			<view class='line3'>
				<view class='line3_position'>
					<view class='left'>报名人数</view>
					<view class="right">
						<view class="quantity_btn">
							<view class="minus_quantity" @click="reducepeople">-</view>
							<input class="input_quantity" disabled="true" type="number" v-model="quantity"
								@input="handleInput">
							<view class="add_quantity" @click="addPeople">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 人数列表的增删 -->
		<view
			style="padding: 32rpx; margin-top: 10px; width: 86%; margin-left:2.5%; border-radius: 10px 10px 10px 10px; box-shadow: 0 10px 25px rgba(0.1, 0.1, 0.1, 0.15);"
			v-for="(item,index) in exigencyList">
			<view class="publish-top-two" style="margin: 32rpx; ">
				<template>
					<view class="publish-top" style="position: relative;" :key="index">
						<view class="person-item">
							<view class="flex" style="display: flex; margin-right: 30px;">
								<view class="asterisk">*</view>
								<view class="item-left">姓名</view>
							</view>
							<u-input v-model="item.name" border="none" placeholder="请输入姓名" @blur="nameInput"
								placeholderStyle="color: #999" type="submitname"></u-input>
						</view>
						<view class="person-item">
							<view class="flex" style="display: flex;">
								<view class="asterisk">*</view>
								<view class="item-left" style="margin-left: -7px;"><uni-data-select v-model="value"
										:localdata="range" @change="change" :clear="false"></uni-data-select></view>
							</view>
							<u-input v-model="item.idNumber" border="none" @blur="idcardInput()" placeholder="请输入身份证"
								placeholderStyle="color: #999" type="submitidentitCyard"></u-input>
						</view>
						<view class="person-item">
							<view class="flex" style="display: flex;">
								<view class="asterisk">*</view>
								<view class="item-left">联系方式</view>
							</view>
							<u-input v-model="item.phoneNumber" border="none" placeholder="请输入联系方式" @blur="phoneInput"
								placeholderStyle="color: #999" type="submittelephone"></u-input>
						</view>
						<view style="position: absolute;top: -5px;left: -37px;width: 40rpx;height: 40rpx;"
							v-if="index != 0" @click.stop="reducepeople(index)">--
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 优惠券选择 -->
		<view class="chooseCoupons" style="padding: 20px; display: flex; justify-content:space-between;" @click="open">
			<view class="couponsType">
				优惠券
			</view>
			<view class="discount">
				减少金额:{{reduceMoney}}
			</view>
		</view>
		<!-- 优惠券弹窗 -->
		<u-popup :show="show" mode="bottom" @close="close">
			<view class="mask" @touchmove.stop.prevent="moveHandle">
				<view v-if="isuseCoupons">
					<view class="couponsItrm" v-for="(item,i) in couponsList" :key="i">
						<view class="couponsContent">
							<view class="couponsContentLeft">
								<view>
									<text style="color:#ffd47c;">￥</text><text
										class="couponsAmount">{{ item.amount }}</text>
								</view>
								<view class="couponsContentLeftBottom">
									<view>
										{{ item.tag }}地区可用
									</view>
									<view>
										过期时间：{{item.expireTime}}
									</view>
								</view>
							</view>
							<view class="couponsContentRight">

								<u-checkbox-group @change="checkboxChange" v-model="checkedVal">
									<view class="checked">
										<u-checkbox shape="circle" :name="item.amount" size="40"></u-checkbox>
									</view>
								</u-checkbox-group>
							</view>
						</view>
					</view>
					<view class="" style="height: 160rpx;">

					</view>
				</view>
				<view v-else>
					<text
						style="font-size: 30rpx; margin: 40rpx; font-style: italic; text-align: center; color: #5e616d;">您现在还没有可使用的优惠券哦</text>
				</view>
			</view>
		</u-popup>
		<view class="submitOrders">
			<view v-model="quantity">人数:{{ quantity }}</view>
			<view v-model="totleMoney">总钱数:{{ totleMoney-reduceMoney }}</view>
			<view>
				<u-button v-if="isSubmitorder" type="primary" text="提交订单" @click="submitOrder"
					throttleTime="1000"></u-button>
				<u-button v-else type="primary" text="提交订单"></u-button>
			</view>
		</view>
		<!-- 遮罩层 -->
		<u-overlay :show="toOverlay" mask-click-able="false">
			<u-loading-icon text="下单中.." textSize="18"></u-loading-icon>
		</u-overlay>
		<view class="" style="height: 100px;">
		</view>
		<view class="popup" v-show="peoplePopup">
			<u-loading-icon></u-loading-icon>
			<view>点太快啦..</view>
			<view>我们在检查一下人员信息吧</view>
		</view>
	</view>
</template>

<script>
	import {
		eventBus
	} from '@/eventBus.js';
	import {
		mapState
	} from 'vuex'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				classList: [],
				quantity: 1,
				reduceMoney: 0,
				exigencyList: [{
					name: '',
					phoneNumber: '',
					idNumber: '',
				}],
				classSList: {
					className: '',
					classImg: '',
				},
				value: 0,
				textSear: '身份证',
				range: [{
						value: 0,
						text: "身份证"
					},
					{
						value: 1,
						text: "军官证"
					},
					{
						value: 2,
						text: "港澳台"
					},
					{
						value: 3,
						text: "出生证"
					},
				],
				show: false,
				couponsList: [],
				totleMoney: 0,
				activityId: '',
				userId: 0,
				couMoney: 0,
				peopleNum: 0,
				toOverlay: false,
				showType: false,
				submitname: false,
				submittelephone: false,
				submitidentitCyard: false,
				isSubmitorder: true,
				peoplePopup: false,
				isuseCoupons: true,
				throttleFlag: true,
				checkedVal: [],
				correctDate: '',
				messagedata: '',
				couponId: '',
				endtime: '',
				messagedata: '',
				couponsTag: '',
				nameArray:[],
				idArray:[]
			};
		},
		computed: {
			...mapState('timeArray', ['timeArray']),
			...mapState('m_user', ['userInfo']),
		},
		onLoad(e) {
			let str = this.timeArray[0].toString()
			let originalDate = new Date(str);
			originalDate.setDate(originalDate.getDate() + this.timeArray[1]);
			this.correctDate = originalDate.toISOString().slice(0, 10);

			this.couponsTag = e.purposeLocation
			this.activityId = e.activityId
			this.totleMoney = this.timeArray[2]
			this.getClassList()
		},
		methods: {
			...mapMutations('messageArray', ['updateMessageArray']),
			moveHandle() {},
			async getClassList() {
				this.userId = this.userInfo.data.data.id
				const res = await uni.$u.http.get("/user/activity/getActivityDetail/" + this.activityId, {
					custom: {
						auth: true
					}
				})
				this.classSList.className = res.data.data.activityName
				this.classSList.classImg = res.data.data.activityImagePath[0].imgSrc
			},
			async getCouponsList() {
				this.userId = this.userInfo.data.data.id
				const res = await uni.$u.http.post("/user/coupon/list", {
					isExpired: false,
					isUse: false,
					orderBy: 0,
					userId: this.userId,
					tag: this.couponsTag
				}, {
					custom: {
						auth: true
					}
				})
				for (var i = 0; i < res.data.data.length; i++) {
					if (res.data.data[i].isUse != 1) {
						if (res.data.data[i].tag == "陕西" || res.data.data[i].tag == '') {
							this.couponsList.push(res.data.data[i])
						}
					}
				}
				if (this.couponsList.length === 0) {
					this.isuseCoupons = false
				}
			},
			handleInput(event) {
				const value = parseInt(event.target.value);
				if (!isNaN(value) && value >= 1) {
					this.quantity = value;
				} else {
					this.quantity = 1;
				}
			},
			addPeople() {
				this.peopleNum = this.quantity++
				this.exigencyList.push({
					name: '',
					phoneNumber: '',
					idNumber: '',
				})
				// 优惠券计算总钱数出现问题
				this.totleMoney = (this.quantity * this.timeArray[2]).toFixed(2)
			},
			reducepeople(index) {
				if (this.quantity > 1) {
					this.quantity--;
					this.totleMoney = (this.totleMoney - this.timeArray[2]).toFixed(2)
					this.exigencyList.pop(index, 1)
				}
			},
			open() {
				this.show = true
				this.getCouponsList()
			},
			close() {
				this.couponsList=[]
				this.show = false
			},
			// 选择优惠券
			checkboxChange(reduceMoneyList) {
				this.show = false

				for (var i = 0; i < this.couponsList.length; i++) {
					if (reduceMoneyList[0] == this.couponsList[i].amount) {
						this.couponId = this.couponsList[i].id
					}
				}
				this.reduceMoney = 0
				if (reduceMoneyList.length == 0) {
					this.reduceMoney = 0
				} else if (reduceMoneyList.length > 0) {
					for (let s of reduceMoneyList) {
						this.reduceMoney += +s
					}
				}
			},
			nameInput(e) {
				const reg = /^[\u4e00-\u9fa5]{2,4}$/;
				if (!reg.test(e)) {
					uni.showToast({
						title: '姓名格式有误',
						icon: 'error',
						duration: 1000
					})
				}
				if (reg.test(e)) {
					this.submitname = true
					this.exigencyList.name = e
					if (this.nameArray.length !== 0) {
						let isExist = this.nameArray.indexOf(this.exigencyList.name)
						if (isExist !== -1) {
							uni.showToast({
								title: '姓名重复',
								icon: 'error',
								duration: 1000
							})
							for (var i = 0; i < this.exigencyList.length; i++) {
								if(this.exigencyList[i].name = this.exigencyList.name){
									this.exigencyList.name = ''
								}
							}
						}
					}
					this.nameArray.push(this.exigencyList.name);
					}
			},
			change(e) {
				if (this.range[e].text == '') {
					this.textSear = ''
				}
				this.textSear = this.range[e].text
			},
			idcardInput(e) {
				const reg =
					/^(^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(1[0-2]))(([0|1|2][0-9])|3[0-1])\d{3}([0-9]|X)$)|(^[1-9]\d{5}\d{2}((0[1-9])|(1[0-2]))(([0|1|2][0-9])|3[0-1])\d{3}$)$/;
				if (!reg.test(e)) {
					uni.showToast({
						title: '身份证格式有误',
						icon: 'error',
						duration: 1000
					})
				}
				if (reg.test(e)) {
					this.submitidentitCyard = true
					this.exigencyList.idNumber = e
					if (this.idArray.length !== 0) {
						let isExist = this.idArray.indexOf(this.exigencyList.idNumber)
						if (isExist !== -1) {
							uni.showToast({
								title: '身份证重复',
								icon: 'error',
								duration: 1000
							})
							for (var i = 0; i < this.exigencyList.length; i++) {
								if(this.exigencyList[i].idNumber = this.exigencyList.idNumber){
									this.exigencyList.idNumber = ''
								}
							}
						}
					}
					this.idArray.push(this.exigencyList.idNumber);
				}
			},
			phoneInput(e) {
				const reg = /^1[3-9]\d{9}$/;
				if (!reg.test(e)) {
					uni.showToast({
						title: '手机号码格式有误',
						icon: 'error',
						duration: 1000
					})
				}
				if (reg.test(e)) {
					this.submittelephone = true
					this.exigencyList.phoneNumber = e
				}
			},
			async submitOrder() {
				if (this.throttleFlag) {
					this.throttleFlag = false;
					setTimeout(() => {
						this.throttleFlag = true;
						let that = this
					}, 2000); // 设置节流时间间隔为1秒
					let endMoney = this.totleMoney - this.reduceMoney
					let num = Number(endMoney).toFixed(2)
					this.userId = this.userInfo.data.data.id
					let nowData = this.timeArray[0] + " 00:00:00"
					let query = {
						activityId: this.activityId,
						amount: num,
						couponId: this.couponId,
						orderUserInfoList: this.exigencyList,
						travelTime: nowData,
						userId: this.userId
					}
					if (this.submittelephone === false || this.submitidentitCyard === false || this.submitname ===
						false) {
						uni.showToast({
							title: '请完善信息哦',
							icon: 'error',
							duration: 1500
						})
					}
					for (var i = 0; i < this.exigencyList.length; i++) {
						if (this.exigencyList[i].idNumber == '' && this.exigencyList[i].name == '' && this
							.exigencyList[i].phoneNumber == '') {
							uni.showToast({
								title: '请完善信息哦',
								icon: 'error',
								duration: 1500
							})
						}
					}
					for (var i = 0; i < this.exigencyList.length; i++) {
						if (this.submittelephone === true && this.submitidentitCyard === true && this.submitname ===
							true && this.exigencyList[i].idNumber !== '' && this.exigencyList[i].name !== '' && this
							.exigencyList[i].phoneNumber !== '') {
							const res = await uni.$u.http.post("/user/order/placeOrder", query, {
								custom: {
									auth: true
								}
							}).then(result => {
								if (result.data.data.orderNumber == '') {
									this.toOverlay = true
								} else {
									uni.showToast({
										title: '下单成功',
										icon: 'success',
										duration: 1000
									})
									this.messagedata = result.data.data
									this.updateMessageArray(this.messagedata)
									this.toOverlay = false
									const orderAmount = result.data.data.orderAmount
									const orderNumber = result.data.data.orderNumber
									const orderTime = result.data.data.orderTime
									setTimeout(() => {
										uni.navigateTo({
											url: '/subpkg/orderOperating/toPayFor?orderAmount=' +
												orderAmount +
												'&orderTime=' + orderTime + '&orderNumber=' + orderNumber
										})
									}, 1000);
									
								}
							}).catch(err => {
								if (err.statusCode === 429) {
									uni.showToast({
										title: '点太快啦我想想',
										icon: 'error',
										duration: 2500,
									})
								}
							})
						}
					}
				}

			}
		}
	}
</script>

<style lang="scss">
	.classBox {
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: ghostwhite;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

		.classLeft {
			flex: 1;
			width: 100px;
			height: 100px;
			padding: 10px;

			.classImg {
				width: 100%;
				height: 100%;
			}
		}

		.classRight {
			flex: 2;
			margin: 10px;
			font-size: 15px;
		}

		.classDate {
			font-size: 14px;
		}
	}

	.quantity_btn {
		display: flex;
		width: 50%;

		.add_quantity {
			border: 1px solid #74bfe7;
			text-align: center;
			width: 25%;
		}

		.input_quantity {
			// border-bottom: 1px solid #74bfe7;
			text-align: center;
			width: 50%;
		}

		.minus_quantity {
			border: 1px solid #74bfe7;
			text-align: center;
			width: 25%;
		}

	}

	.line3 {
		padding: 40rpx;
		margin-top: 40rpx;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

		.line3_position {
			width: 100%;
			display: flex;

			.left {
				width: 30%;
			}

			.right {
				display: flex;
				justify-content: flex-end;
				width: 70%;
			}
		}
	}

	.chooseCoupons {
		margin: 20px;
		color: black;
		width: 80%;
		height: 20rpx;
		border-bottom: 1px #9C9C9C solid;
	}

	.publish-top {
		margin: 12px 16px 0px 16px;
		background-color: #fff;
		border-radius: 16rpx;

		.person-item {
			display: flex;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1px solid #E6E6E8;
		}

		//紧急联系人
		.publish-top-two {
			position: absolute;
			left: auto;
			top: 104px;

			.publish-top {
				position: relative;
				background-color: #fff;
				border-radius: 16rpx;

				.reduce-btn {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.asterisk {
		color: rgba(255, 128, 128, 1);
		margin-right: 10rpx;
		margin-top: 12rpx;
	}

	.item-left {
		color: #1A1A1A;
		font-family: MiSans-Medium, MiSans;
		font-weight: 500;
		margin-right: 32rpx;
	}

	.addexigencybth {
		height: 88rpx;
		margin: 12px 16px 0px 16px;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1A1A1A;
		font-size: 32rpx;
		font-weight: 500;
	}

	.submitOrders {
		width: 100%;
		padding: 10px;
		background-color: #F5F5F5;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		z-index: 99;
		box-shadow: gray 0px 0px 6px
	}

	.couponsItrm {
		width: 100%;

	}

	.couponsContent {
		display: flex;
		padding: 5rpx 20rpx 20rpx 20rpx;
		width: 92%;
		background-color: #a0cfff;
		border: #F5F5F5 10rpx solid;
		border-radius: 25rpx;
		justify-content: space-between;

		.couponsContentLeftBottom {
			margin-left: 40rpx;
			display: flex;
			flex-direction: column;
			color: #969696;
			font-size: 15rpx;
		}

		.couponsAmount {
			color: #ffd47c;
			font-size: 80rpx;
		}

		.couponsContentLeft {
			display: flex;
			flex-direction: column;
		}

		.couponsContentRight {
			width: 100rpx;
			display: flex;
			align-items: center;
		}
	}

	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 200rpx;
		height: 150rpx;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		padding: 20px;
		max-width: 400px;
		text-align: center;
		z-index: 1000;
	}
</style>